<template>
	<view class="" style="background-color: rgb(241,241,241); padding-bottom: 100upx;">
		<view class="lickdraw_top">
			<image src="https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/bg5.png" mode="" class="imgbg"></image>
			<image src="https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/img6.png" mode="" class="imgzhan"></image>
			<view class="imgtime">
				<view class="luckdraw_text">
					<view>今日开奖号</view>
					<text>{{time.draw}}</text>
				</view>
				<view class="luckdraw_text">
					<view class="">
						下期开奖时间
					</view>
					<view class="">
						<text>{{year}}</text>
						<text>年</text>
						<text>{{month}}</text>
						<text>月</text>
						<text>{{day}}</text>
						<text>日</text>
					</view>
				</view>
			</view>
			<view class="luckdraw_rule" @click="addcss">
				抽奖规则
			</view>
		</view>
		<view class="licjdraw_cot">
			<!-- <view style="overflow: hidden; margin-top: 22%; height: 600upx;" >
				<view  id="luckitemname" >
					<view style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 30upx;" v-for="item in endluck"
					 :key="item.id">
						<text style="font-size: 32upx;font-weight: bolder;">第{{item.wid}}期</text>
						<view class="" style=" display: flex;justify-content: space-between;font-size: 28upx" v-for="items in item.user" :key="items.id">
							<text>
								{{items.realname}}
							</text>
							<text>{{items.phone}}</text>
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				 :direction="direction" :vertical="vertical">


					<view v-for="(item,index) in 4" :key="index">
						<swiper-item>
							<view class="" v-for="(item,id) in endluck" :key="item.id" v-if="id < (index+1) * 4 && id >= index*4">

								<text>第{{item.wid}}期</text>
								<view class="swiper-item" v-for="items in item.user" :key="items.id" style="height: 100%;" >
									<text>{{items.realname}}</text>
									<text>{{items.phone}}</text>
								</view>
							</view>
						</swiper-item>

					</view>



				</swiper>
			</view> -->

			<view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="false" @scrolltolower="lower">
					<view class="luck-info" v-for="item in endluck" :key="item.id">
						<text class="user-num">第{{item.wid}}期</text>
						<view id="demo1" class="scroll-view-item" v-for="items in item.user" :key="items.id">
							<text>{{items.realname}}</text>
							<text>{{items.phone}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>



		<view class="luckdraw_carousel">
			<view class="title">—— 热门奖品 ——</view>
			<scroll-view scroll-x class="h-list">
				<view class="scoll-wrapper">
					<view v-for="(item, index) in endluck" :key="index" class="floor-item" @click="navToDetailPage(item)">
						<image :src="item.cover_img" mode="aspectFill"></image>
						<text class=" clamp">{{item.title}}</text>
						<text class="price">￥{{item.draw_money}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="luckdraw_carousel">
			<view class="title" style="background-image: url('https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/bg9.png');">——抽奖商品
				——</view>
			<view class="guess-section">
				<view v-for="(item,id) in luck" :key="id" class="guess-item" >
					<view class="image-wrapper"  @click="navToDrawDetail(item)">
						<image :src="item.cover_img" mode="aspectFill"></image>
					</view>
					<text class=" clamp">{{item.title}}</text>
					<view style="display: flex;justify-content: space-between;"><text class="price">￥{{item.draw_money}} </text>
						<view class="num">
							<button>{{item.num}}/28</button>
						</view>
						<text @click="gotoorder(item)" class="buttom" v-if="item.num !== 28">立即参加</text>
					</view>
					<text class="buttom" v-if="item.num === 28" disabled="disabled">正在开奖</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		goodsLists
	} from '../../api/Json.js'
	import uniIcons from '../../ed-icons/ed-icons.vue'
	import {
		getOne
	} from '../../api/publicapi.js'

	export default {
		props: {
			height: {
				default: 60,
				type: Number
			},
			lineNum: {
				default: 4,
				type: Number
			}
		},
		computed: {
			transform: function() {
				return 'translateY(-' + this.num * this.height + 'px)'
			}
		},
		components: {
			uniIcons
		},
		data() {
			return {
				goodsList: [],
				luck: [],
				endluck: [],
				key: 'open',
				end: 'end',
				num: 0,
				infoindex: 0,
				arr: [],
				scrollTop: 0,
				time: [],
				year: [],
				month: [],
				day: [],
				old: {
					scrollTop: 0
				},
				top: 200,
				cssheight: 0,
				
			}
		},
		mounted() {
			this.loadData()
			this.addcss()
		},
	
		onShow() {
			this.getluck(this.key)
			this.getendluck(this.end)
			this.gettime()

		},
		created() {
			let _this = this
			setInterval(function() {
				if (_this.num !== _this.arr.length) {
					_this.num++
				} else {
					_this.num = 0
				}
			}, 3000)
		},
		methods: {
			lower: function(e) {
				// console.log(e)
				this.scrollTop = 0
			},
			async loadData() {
				let goodsList = await goodsLists();
				this.goodsList = goodsList || [];
			},
			gotoorder(e) {
				// console.log('gotoorder',e)
				uni.navigateTo({
					url: `/pages/order/luckdraworder?data=${JSON.stringify({
                 		goodsData: e
                 	})}`
				})

			},
			// 抽奖奖品
			getluck(key) {
				let data = {
					'key': key,
					'tid': this.luck.tid,
					'wid': this.luck.wid
				}
				getOne('/front/draw', data).then(res => {
					this.luck = res.data
				})
			},
			//跳转抽奖详情页
			navToDrawDetail(item) {
				
				uni.navigateTo({
					url:`/pages/luckdraw/luckdrawdetail?data=${JSON.stringify(item)}`
				})
				
			},

			//商品详情页
			navToDetailPage(item) {
				let id = item.sid;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},

			// 往期中奖
			getendluck(end) {
				let data = {
					'key': end,
					'tid': this.luck.tid,
					'wid': this.luck.wid
				}
				getOne('/front/draw', data).then(res => {
					this.endluck = res.data
					// console.log(res.data)
				})
			},

			// 中奖时间和号码
			gettime() {
				getOne('/front/draw/getdrawtime').then(res => {
					this.time = res.data
					// 年
					this.year = res.data.time.substring(0, 4)
					// 月
					this.month = res.data.time.substring(5, 7)
					// 日
					this.day = res.data.time.substring(8, 11)
				})
			},
			getElSize(id) { //得到元素的size
				return new Promise((res) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			addcss() {
				let that = this
				// let heightcss = this.getElSize('luckitemname').then(res => {
				// 	console.log(res)
				// 	that.cssheight = res.height

				// })
				// getValue.value
				setInterval(function() {
					// console.log(Math.abs(that.top))
					// console.log(that.cssheight)
					// if (that.cssheight >= Math.abs(that.top)) {
					// 	that.top = that.top - 10
					// } else {
					// 	that.top = 100
					// }
					that.scrollTop += 20
					// console.log(that.scrollTop)
				}, 1000)
				// console.log(heightcss)
			}

		}
	}
</script>

<style lang='scss'>
	.lickdraw_top {
		height: 510upx;
		width: 100%;

		.imgbg {
			width: 100%;
			height: 100%;
			position: relative;
			top: 0px
		}

		.imgzhan {
			position: absolute;
			width: 300upx;
			height: 300upx;
			left: 30upx;
			top: 100upx;
		}

		.imgtime {
			position: absolute;
			width: 300upx;
			height: 300upx;
			right: 30upx;
			top: 110upx;
			background-image: url('https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/bg6.png');
			background-size: 100% 100%;
		}

		.luckdraw_rule {
			position: absolute;
			padding: 10upx;
			padding-left: 20upx;
			padding-right: 20upx;
			background-color: rgba($color: #000000, $alpha: 0.5);
			color: #FFFFFF;
			font-size: $font-base;
			right: 30upx;
			top: 30upx;

		}

		.luckdraw_text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			margin-top: 35upx;

			text {
				margin: 5upx;
				padding: 5upx;
				background-color: #303133;
				color: #FFFFFF;
				font-size: 25upx;
				border-radius: 5upx;
			}

			view {
				font-size: 30upx;
				margin-bottom: 20upx;

			}
		}
	}

	.licjdraw_cot {
		height: 620upx;
		margin-left: 30upx;
		margin-right: 30upx;
		background-image: url('https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/bg7.png');
		background-size: 100% 100%;
		display: flex;

		justify-content: center;

		text {}

		>view {
			width: 92%;
			height: 100%;
			margin-top: 22%;
			overflow: hidden;
		}
	}

	.luckdraw_carousel {
		margin-top: 20upx;
		width: 100%;

		.title {
			height: 105upx;
			background-image: url('https://edsfiles.oss-cn-shenzhen.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/bg8.png');
			width: 100%;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 30upx 30upx;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}
	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 30upx 30upx 30upx 30upx;
		background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			position: relative;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.num {
			position: absolute;
			right: 0;
			right: -20upx;
			top: -20upx;

			button {
				width: 70upx;
				height: 70upx;
				background: #dd301e;
				border-radius: 50%;
				color: #fff;
				padding: 0;
				font-size: 24upx;
				line-height: 70upx;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.clamp {
			font-size: $font-lg +3upx;

			line-height: 1;
		}

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}

		text {
			margin-top: 10upx;
			margin-bottom: 10upx;

		}

		.buttom {
			font-size: 28rpx;
			line-height: 1;
			padding: 8upx;
			background-color: #ff0000;
			color: #FFFFFF;
			border-radius: 8upx;
		}
	}


	.scroll-Y {
		height: 398upx;
		margin-top: 26upx;
		position: relative;
	}

	.scroll-view-item {
		height: 60upx;
		text-align: center;
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
		width: 95%;
		margin: 0 auto;
	}

	.user-num {
		font-size: 32upx;
		font-weight: bolder;
		padding-left: 10upx;
		padding-bottom: 15upx;
		display: block;
	}

	.luck-info {
		/* animation: myimg 3s linear infinite normal; */
		position: relative;
		width: 90%;

	}

	@keyframes myimg {
		0% {
			top: 50upx;
		}

		20% {
			top: -100upx;
		}

		40% {
			top: -150upx;
		}

		60% {
			top: -200upx;
		}

		80% {
			top: -250upx;
		}

		100% {
			top: -300upx;
		}
	}
</style>
